<template>
  <div class="good_container">
    <!-- 面包屑导航区域 -->
    <div class="el-header">
      <el-menu background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home" @click="$router.push('/home')">首页</el-menu-item>
        <el-menu-item>商品子类别管理</el-menu-item>
        <el-menu-item @click="$router.push('/goodscate')">&lt;&lt; 返回商品类别管理</el-menu-item>
      </el-menu>
    </div>
    <!-- 面包屑导航区域 -->
    <el-card>
      <el-form ref="form" :model="form" label-width="100px" inline sizi="mini">
        <el-form-item label="商品类别" prop="type">
          <el-input v-model.trim="form.type"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row
      :gutter="20"
      style="margin-left: 15px;
    line-height: 39px;"
    >
      <el-col :span="4">子类别数量:{{ tableData.length }}</el-col>
      <el-col :span="4"><el-button type="primary" @click="addCate({ flag: true })">新增子类别</el-button></el-col>
    </el-row>
    <el-card>
      <!-- 数据表格展示区域 -->
      <el-table :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="children_type" label="子类别名称"> </el-table-column>
        <el-table-column prop="children_num" label="排序"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="editCate({ row: scope.row, flag: true })">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteCate(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区域 -->
    </el-card>
    <!-- 编辑对话框 -->
    <el-dialog title="提示" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="cateForm" :model="cateForm" label-width="100px" inline sizi="mini">
        <el-form-item label="类别名称" prop="type">
          <el-input v-model.trim="cateForm.type"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input v-model.trim="cateForm.num" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCate({ flag: false })">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增对话框 -->
    <el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
      <el-form ref="cateForm" :model="addForm" label-width="100px" inline sizi="mini">
        <el-form-item label="类别名称" prop="type">
          <el-input v-model.trim="addForm.type"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="type">
          <el-input v-model.trim="addForm.num" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate({ flag: false })">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'GoodType',
  props: {
    cateId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      form: {},
      cateForm: {
        type: '',
        num: null
      },
      addForm: {
        type: '',
        num: null
      },
      tableData: [],
      editDialogVisible: false,
      addDialogVisible: false,
      row: null,
      res: null
    }
  },
  created() {
    this.getChildType()
  },
  methods: {
    async getChildType() {
      const { data: res } = await this.$http.get(`/typeLists/${this.cateId}`)
      this.res = res
      this.tableData = res.children
    },
    async submitForm() {
      var arr1 = this.tableData.filter(item => item.children_type === this.form.type)
      this.tableData = arr1
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.getChildType()
    },
    async addCate(obj) {
      if (obj.flag === true) {
        this.addDialogVisible = true
      } else {
        if (this.addForm.type && this.addForm.num) {
          var childtype = {
            children_num: this.addForm.num,
            children_type: this.addForm.type,
            id: this.tableData.length + 2
          }
          this.res.children.push(childtype)
          await this.$http.put(`/typeLists/${this.cateId}`, this.res)
          this.addForm.type = ''
          this.addForm.num = null
          this.getChildType()
          this.addDialogVisible = false
        }
      }
    },
    async editCate(obj) {
      if (obj.flag === true) {
        console.log(obj)
        this.editDialogVisible = true
        this.row = obj.row
        this.cateForm.type = this.row.children_type
        this.cateForm.num = this.row.children_num
      } else {
        if (this.cateForm.type || this.cateForm.num) {
          this.row.children_type = this.cateForm.type
          this.row.children_num = this.cateForm.num
          await this.$http.put(`/typeLists/${this.cateId}`, this.res)
        }
        this.getChildType()
        this.editDialogVisible = false
      }
    },
    deleteCate(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          var index = this.tableData.findIndex(item => item.id === row.id)
          this.tableData.splice(index, 1)
          await this.$http.put(`/typeLists/${this.cateId}`, this.res)
          this.getChildType()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="less" scoped>
.good_container {
  .el-header {
    padding: 0;
  }
  width: 100%;
  .el-breadcrumb {
    margin-top: 15px;
    margin-left: 15px;
  }
  .el-card {
    margin: 25px;
    min-width: 1200px im !important;
    .el-form {
      .el-button {
        margin-left: 30px;
      }
    }
  }
}
</style>
